<section>
	<div class="container">
		<div class="tik-search">
			<i class="iconfont iconSearch"></i>
			<input type="text" id="insKeyword" placeholder="Search">
		</div>
		<div class="options-row">
            <div class="left">
				<span>Total Followers</span>
				<i class="iconfont icondown1"></i>
			</div>
			<div class="right" onclick="showFilter()">
				Filter
				<i class="iconfont iconfilter-list"></i>
			</div>
		</div>
		<div class="mask" id="mask">
			<div class="mask-con" id="maskContent">
				<div class="options-row">
					<div class="left">
                        <span>Total Followers</span>
						<i class="iconfont icondown1"></i>
					</div>
					<div class="right" onclick="showFilter()">
						<span>Filter</span>
						<i class="iconfont iconfilter-list"></i>
					</div>
				</div>
				<ul id="sortType">
					<li style="display: block; padding: 0">
						<div class="gd-btn-select">
							<ul class="btn-select">
								<li class="btn-select-item is-active" data-sort="0">Followers</li>
								<li class="btn-select-item" data-sort="7">Avg Likes</li>
								<li class="btn-select-item" data-sort="8">Avg Reviews</li>
<#--								<li class="btn-select-item" data-sort="2">Quality Followers</li>-->
<#--								<li class="btn-select-item" data-sort="3">30-Day Growth</li>-->
								<li class="btn-select-item" data-sort="1">Avg ER</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="filter">
			<div class="filter-header">
				<i class="iconfont iconbuzhichi" onclick="hideFilter()"></i>
				<span>Filter</span>
			</div>
			<div class="filter-body">
				<div class="search-item">
					<div class="top" onclick="showMoreSearchItem(this)">
						<div class="title">
							Influencer Info
						</div>
						<i class="iconfont iconsort-down"></i>
					</div>
					<div class="content" style="display: block">
						<div class="select-item">
							<div class="select-title">Primary Type</div>
							<div class="gd-select">
								<div class="gd-select-title">
									<div class="label">Primary</div>
									<i class="iconfont icondown1"></i>
								</div>
								<div class="gd-select-wrap">
									<ul id="categoryPrimary" label="Primary" name="primaryCategory">
									</ul>
								</div>
							</div>
						</div>
						<div class="select-item">
							<div class="select-title">Secondary Type</div>
							<div class="gd-select">
								<div class="gd-select-title">
									<div class="label">Secondary</div>
									<i class="iconfont icondown1"></i>
								</div>
								<div class="gd-select-wrap">
									<ul id="secondaryPrimary" label="Secondary" name="secondCategory">
									</ul>
								</div>
							</div>
						</div>
						<div class="select-item">
							<div class="select-title">Country/Region</div>
							<div class="gd-select">
								<div class="gd-select-title">
									<div class="label">Country/Region</div>
									<i class="iconfont icondown1"></i>
								</div>
								<div class="gd-select-wrap">
									<ul id="influencerRegion" label="Country/Region" name="region">
									</ul>
								</div>
							</div>
						</div>
						<div class="select-item">
							<div class="select-title">Language</div>
							<div class="gd-select">
								<div class="gd-select-title">
									<div class="label">Language</div>
									<i class="iconfont icondown1"></i>
								</div>
								<div class="gd-select-wrap">
									<ul id="influencerLanguge" label="Language" name="language">
									</ul>
								</div>
							</div>
						</div>
						<div class="select-item">
							<div class="select-title">Gender</div>
							<div class="gd-select" id="gender">
								<div class="gd-select-title">
									<div class="label">Gender</div>
									<i class="iconfont icondown1"></i>
								</div>
								<div class="gd-select-wrap">
									<ul name="gender" label="Gender">
										<li class="gd-option">All</li>
										<li class="gd-option" value="1">Male</li>
										<li class="gd-option" value="2">Female</li>
										<li class="gd-option" value="">Undefined</li>
									</ul>
								</div>
							</div>
							<div class="select-item">
								<div class="select-title">Age</div>
								<div class="gd-select" id="age">
									<div class="gd-select-title">
										<div class="label">Age</div>
										<i class="iconfont icondown1"></i>
									</div>
									<div class="gd-select-wrap">
										<ul name="age" label="Age">
											<li class="gd-option" value="0">All</li>
											<li class="gd-option" value="1">18-</li>
											<li class="gd-option" value="2">18 - 24</li>
											<li class="gd-option" value="4">25 - 34</li>
											<li class="gd-option" value="5">35 - 44</li>
											<li class="gd-option" value="6">45+</li>
										</ul>
									</div>
								</div>
							</div>
                            <#--<div class="select-item">
								<div class="select-title">Personal/Brand</div>
								<div class="gd-select" id="brand"></div>
							</div>-->
							<div class="select-item">
								<div class="select-title">Verification</div>
								<div class="gd-select">
									<div class="gd-select-title">
										<div class="label">Verification</div>
										<i class="iconfont icondown1"></i>
									</div>
									<div class="gd-select-wrap">
										<ul name="verification" label="Verification">
											<li class="gd-option" value="0">All</li>
											<li class="gd-option" value="1">Verified</li>
											<li class="gd-option" value="2">Not verified</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="select-item">
								<div class="select-title">Contact Info</div>
								<div class="gd-select">
									<div class="gd-select-title">
										<div class="label">Contact Info</div>
										<i class="iconfont icondown1"></i>
									</div>
									<div class="gd-select-wrap">
										<ul name="contact" label="Contact Info">
											<li class="gd-option" value="0">All</li>
											<li class="gd-option" value="1">Has Contact</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="select-item">
								<div class="select-title">Account Type</div>
								<div class="gd-select">
									<div class="gd-select-title">
										<div class="label">Account Type</div>
										<i class="iconfont icondown1"></i>
									</div>
									<div class="gd-select-wrap">
										<ul name="isBusiness" label="Account Type">
											<li class="gd-option" value="0">All</li>
											<li class="gd-option" value="2">Non-Business Account</li>
											<li class="gd-option" value="1">Business Account</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="select-item">
								<div class="select-title">Tagged</div>
								<div class="gd-input-wrap">
									<input type="text" id="taggedUsername" name="taggedUsername" class="gd-input" placeholder="Enter Tagged Account Username">
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="search-item">
					<div class="top" onclick="showMoreSearchItem(this)">
						<div class="title">
							Influencer Data
						</div>
						<i class="iconfont iconsort-down"></i>
					</div>
					<div class="content">
						<div class="gd-btn-select select-item" id="followers" data-label="Followers"></div>
<#--						<div class="gd-btn-select select-item" id="qualFollowers" data-label="Quality Followers"></div>-->
						<div class="gd-btn-select select-item" id="engagementRate" data-label="Engagement Rate"></div>
<#--						<div class="gd-btn-select select-item" id="followersGrowth" data-label="30-Day Followers Growth Rate"></div>-->
					</div>
				</div>
				<div class="search-item">
					<div class="top" onclick="showMoreSearchItem(this)">
						<div class="title">
							Audience Demographics
						</div>
						<i class="iconfont iconsort-down"></i>
					</div>
					<div class="content">
						<div class="select-item">
							<div class="select-title">Location</div>
							<div class="gd-select" id="audiCountry">
								<div class="gd-select-title">
									<div class="label">Location</div>
									<i class="iconfont icondown1"></i>
								</div>
								<div class="gd-select-wrap">
									<ul id="audienceRegion" label="Audience Location" name="audienceRegionMore">
									</ul>
								</div>
							</div>
						</div>
						<div class="select-item">
							<div class="select-title">Language</div>
							<div class="gd-select">
								<div class="gd-select-title">
									<div class="label">Language</div>
									<i class="iconfont icondown1"></i>
								</div>
								<div class="gd-select-wrap">
									<ul id="audienceLanguage" label="Audience Language" name="audienceLanguageMore">
									</ul>
								</div>
							</div>
						</div>
						<div class="gd-btn-select select-item" id="audiGender" data-label="Gender Distribution">
							<div class="label">Gender Distribution</div>
							<ul class="btn-select">
								<li class="btn-select-item is-active" value="0" onclick="hideCust()">All</li>
								<li class="btn-select-item" value="1" onclick="hideCust()">Male</li>
								<li class="btn-select-item" value="2" onclick="hideCust()">Female</li>
                                <#--								<li class="btn-select-item" value="3" onclick="showCust(this)">Custom</li>-->
							</ul>
							<ul class="btn-select">
								<li id="custGender" style="display: none;align-items: center;">
									<div style="margin-top: 0;" class="gd-select" data-label="Gander" name="gander"
									     id="gander">
										<div class="gd-select-title" style="width: 65px;">
											<div class="label">Gender</div>
											<i class="iconfont icondown1"></i>
										</div>
										<div class="gd-select-wrap" style="display: block;">
											<ul>
												<li class="gd-option is-active" value="1">Male</li>
												<li class="gd-option" value="2">Female</li>
											</ul>
										</div>
									</div>
									<span>&nbsp;>&nbsp;</span>
									<div class="num-input">
										<input style="width: 40px;" type="number"
										       oninput="if(value.length>3)value=value.slice(0,3);if(value>100)value=100;if(value<0)value=0;"
										       onchange="percenChange(this)" maxlength="3" max="100"
										       min="0" value="0">
										<div>%</div>
									</div>
								</li>
							</ul>
						</div>
						<div class="gd-btn-select select-item" id="ageDistribute" data-label="Age Distribution"></div>
					</div>
				</div>
			</div>
			<div class="filter-footer">
				<button class="gd-btn btn-default" onclick="clearAll()">Clear All</button>
				<button class="gd-btn btn-info" onclick="searchFilter()">Search</button>
			</div>
		</div>
	</div>
</section>
<section class="tiktoker-list">
	<div class="container">
		<div class="gd-mobile-list">
			<div class="gd-mobile-list__wrap">
                <#if listData.list?size gt 0>
                    <#list listData.list as item>
						<a href="/instagram/influencer/${item.username}">
							<div class="user-item">
								<div class="user-info">
									<div class="avatar">
                                        <#assign picUrl=myController.getNoExpiredImage(item.picUrl, 0, 0)>
										<img class="head" src="${picUrl}" alt="${item.fullName}">
                                        <#if item.isVerified == true>
											<img class="icon" width="16" height="16"
											     src="${request.contextPath}/static/img/ins/Authentication.png"
											     srcset="${request.contextPath}/static/img/ins/Authentication@2x.png 2x" alt="">
                                        </#if>
									</div>
									<div class="user-title">
										<div class="top">
											<div class="nickname">
												${item.username}
											</div>
                                            <#--<svg title="${item.nation}" class="icon icon-country" aria-hidden="true">
												<use xlink:href="#icon_${item.nation}"></use>
											</svg>-->
                                            <#if item.categoryName??>
	                                            <div class="category">
                                                    ${item.categoryName}
	                                            </div>
                                            </#if>
										</div>
										<div class="bottom">
                                            ${item.fullName}
										</div>
									</div>
                                    <#if item.collectId?? && item.collectId gt 0>
										<div class="gd-popover">
											<div class="icon-collect is-collect" data-collectId="${item.collectId?c}" onclick="collectUser(this, event)">
												<i class="iconfont iconquxiaoshoucang33"></i>
											</div>
										</div>
                                    <#else>
										<div class="gd-popover">
											<div class="icon-collect" data-uid="${item.uid?c}" onclick="collectUser(this, event)">
												<i class="iconfont iconshoucang"></i>
											</div>
										</div>
                                    </#if>
								</div>
								<div class="user-data">
									<div class="data-item">
										<div class="label">Followers</div>
                                        <#if item.followerCount??>
                                            <#assign followerCount=myController.getNumber(item.followerCount)>
											<div class="num">${followerCount}</div>
                                        <#else>
											<div class="num">0</div>
                                        </#if>
									</div>
									<div class="data-item">
										<div class="label">Avg Likes</div>
                                        <#if item.avgLike??>
                                            <#assign avgLike=myController.getNumber(item.avgLike)>
											<div class="num">${avgLike}</div>
                                        <#else>
											<div class="num">0</div>
                                        </#if>
									</div>
									<div class="data-item">
										<div class="label">Avg Reviews</div>
                                        <#if item.avgReviews??>
                                            <#assign avgReviews=myController.getNumber(item.avgReviews)>
											<div class="num">${avgReviews}</div>
                                        <#else>
											<div class="num">0</div>
                                        </#if>
									</div>
									<div class="data-item">
										<div class="label">Avg ER</div>
                                        <#if item.engagementRate??>
                                            <#assign engagementRate=myController.getNumber(item.engagementRate*100)>
											<div class="num">${engagementRate}%</div>
                                        <#else>
											<div class="num">0%</div>
                                        </#if>
									</div>
								</div>
							</div>
						</a>
                    </#list>
                <#else>
					<div class="no-data"><img width="131" height="131" src="/static/img/ins/noData.png"
					                          alt="no data img"
					                          srcset="/static/img/ins/noData@2x.png 2x, /static/img/ins/noData@3x.png 3x">
						<div class="title">No related data available</div>
					</div>
                </#if>
			</div>
			<div class="gd-mobile-list__footer">
                <#if login != false>
					<div class="rotate"><i class="iconfont icongengxin"></i></div>
					<span class="list-footer-tx" style="display: none">You have reached the end.</span>
                <#else>
					<a href="javascript:;" onclick="toLogin()">
						View More
					</a>
                </#if>
			</div>
		</div>
	</div>
</section>
<script src="${request.contextPath}/static/js/scroll.js"></script>
<script>
    <#if login != false>
    let scrollTimer
    let hasData = true
    window.addEventListener('scroll', () => {
        if (!hasData) {
            return
        }
        if (parseInt((getScrollTop() + getWindowHeight() + 200)) >= getScrollHeight()) {
            if (scrollTimer) {
                clearTimeout(scrollTimer)
            }
            scrollTimer = setTimeout(() => {
                params.page++
                searchUser()
            }, 500)
        } else {
            if (scrollTimer) {
                clearTimeout(scrollTimer)
            }
        }
    })
    </#if>
    initEvent()
    init()
    let isShowSort = false
    function initEvent() {
        const mask = document.getElementById('mask')
        const el_sort = document.querySelectorAll('.options-row>.left')
	    const sortType = document.getElementById('sortType')
        el_sort.forEach(item => {
            item.addEventListener('click', () => {
                <#if login == false>
	            toLogin()
	            return false
                </#if>
                if (isShowSort) {
                    mask.hide()
                    document.body.style.overflow = 'auto'
                    sortType.hide()
                    isShowSort = false
                } else {
                    mask.style.top = getScroll().top + 'px'
                    mask.show()
                    document.body.style.overflow = 'hidden'
                    sortType.show()
                    isShowSort = true
                }
            })
        })
	    document.querySelectorAll('#sortType .btn-select-item').forEach(item => {
            item.addEventListener('click', e => {
                if(!item.classList.contains('is-active')) {
                    item.parentElement.querySelector('.is-active').classList.remove('is-active')
                    item.classList.add('is-active')
                    rankSort = item.getAttribute('data-sort')
                    mask.hide()
                    document.body.style.overflowY = 'auto'
                    el_sort.forEach(sort => {
                        sort.querySelector('span').innerText = item.innerText
                    })
                    searchUser()
                }
            })
	    })

	    // mask 事件
        const maskContent = document.getElementById('maskContent')
        maskContent.addEventListener('click', (e) => {
            e.stopPropagation()
        })
        mask.addEventListener('click', (e) => {
            mask.hide()
            isShowSort = false
            document.body.style.overflowY = 'auto'
            e.preventDefault()
        })
	    // search 输入事件
        const insKeyword = document.getElementById('insKeyword')
        insKeyword.addEventListener('input', debounce(() => {
            params.page = 1
            searchUser()
        }, 300))

        const audiGender = document.getElementById('audiGender')
        audiGender.querySelectorAll('.btn-select-item').forEach(item => {
            item.addEventListener('click', () => {
                <#if login != false && user.roleId lte 2>
                const config = {
                    class: '',
                    content: 'Only available for ADVANCED version users or higher,upgrade now!',
                    confirmBtnText: 'Upgrade',
                    confirmBtn: {
                        event: () => {
                            window.location.href = '/pricing?refer=' + window.location.href
                        }
                    },
                    cancelBtnText: 'Not Now',
                }
                showModal(config)
                return false
                </#if>
                audiGender.querySelector('.btn-select-item.is-active').classList.remove('is-active')
                item.classList.add('is-active')
                params['audienceGenderMore'] = item.value
            })
        })
    }
    function searchFilter() {
        params.page = 1
        searchUser()
    }
    let searchTikTokerTimer
    function searchKeyWord(e) {
        return function () {
            if (searchTikTokerTimer) {
                clearTimeout(searchTikTokerTimer)
            }
            searchTikTokerTimer = setTimeout(() => {
                searchTikTokerTimer = null
                params.userName = e.value
                params.page = 1
                searchUser()
            }, 500)
        }
    }

    function init() {
        getFollower()
        // getQualFollowers()
        getEngagementRate()
        // getFollowerGrowth()
        getAgeDistribute()
    }

    function getFollower() {
        const e = document.getElementById('followers')
        const arr = [
            {
                id: 0,
                name: 'All'
            },
            /*{
                id: 1,
                name: '10K - 50K'
            },*/
            {
                id: 2,
                name: '50K - 100K'
            },
            {
                id: 3,
                name: '100K - 500K'
            },
            {
                id: 4,
                name: '500K - 1M'
            },
            {
                id: 5,
                name: '1M - 5M'
            },
            {
                id: 6,
                name: '5M - 10M'
            },
            {
                id: 7,
                name: '>10M'
            }
        ]
        initSelectBtn(e, arr, 'followers')
    }

    function getQualFollowers() {
        const e = document.getElementById('qualFollowers')
        const arr = [
            {
                id: 0,
                name: 'All'
            },
            /*{
                id: 1,
                name: '10K - 50K'
            },
            {
                id: 2,
                name: '50K - 100K'
            },*/
            {
                id: 3,
                name: '100K - 500K'
            },
            {
                id: 4,
                name: '500K - 1M'
            },
            {
                id: 5,
                name: '1M - 5M'
            },
            {
                id: 6,
                name: '5M - 10M'
            },
            {
                id: 7,
                name: '>10M'
            }
        ]
        initSelectBtn(e, arr, 'qualityFollowers')
    }

    function getEngagementRate() {
        const e = document.getElementById('engagementRate')
        const arr = [
            {
                id: 0,
                name: 'All'
            },
            {
                id: 1,
                name: '1% - 3%'
            },
            {
                id: 2,
                name: '3% - 5%'
            },
            {
                id: 3,
                name: '5% - 10%'
            },
            {
                id: 4,
                name: '10% - 20%'
            },
            {
                id: 5,
                name: '20% - 30%'
            },
            {
                id: 6,
                name: '>30%'
            }
        ]
        initSelectBtn(e, arr, 'er')
    }

    function getFollowerGrowth() {
        const e = document.getElementById('followersGrowth')
        const arr = [
            {
                id: 0,
                name: 'All'
            },
            {
                id: 1,
                name: '<5%'
            },
            {
                id: 2,
                name: '5% - 10%'
            },
            {
                id: 3,
                name: '10% - 20%'
            },
            {
                id: 4,
                name: '20% - 30%'
            },
            {
                id: 5,
                name: '30% - 50%'
            },
            {
                id: 6,
                name: '> 50%'
            }
        ]
        initSelectBtn(e, arr, 'followerGrowth')
    }

    function getAgeDistribute() {
        const e = document.getElementById('ageDistribute')
        const arr = [
            {
                id: 0,
                name: 'All'
            },
            {
                id: 1,
                name: '18-'
            },
            {
                id: 2,
                name: '18 - 24'
            },
            {
                id: 4,
                name: '25 - 34'
            },
            {
                id: 5,
                name: '35 - 44'
            },
            {
                id: 6,
                name: '45+'
            },
        ]
        initSelectBtn(e, arr, 'audienceAgeMore')
    }

    function initSelectBtn(e, arr, paramKey) {
        let str = '<div class="label">' + e.getAttribute('data-label') + '</div>'
            + '<ul class="btn-select">'
        arr.forEach((item, index) => {
            if (index === 0) {
                str += '<li class="btn-select-item is-active" value="' + item.id + '">' + item.name + '</li>'
            } else {
                str += '<li class="btn-select-item" value="' + item.id + '">' + item.name + '</li>'
            }
        })
        str += '</ul>'
        e.innerHTML = str
        e.querySelectorAll('.btn-select-item').forEach(item => {
            item.addEventListener('click', () => {
                <#if login != false && user.roleId lte 2>
                const config = {
                    class: '',
                    content: 'Only available for ADVANCED version users or higher,upgrade now!',
                    confirmBtnText: 'Upgrade',
                    confirmBtn: {
                        event: () => {
                            window.location.href = '${contextPath}/pricing?refer=' + window.location.href
                        }
                    },
                    cancelBtnText: 'Not Now',
                }
                showModal(config)
                return false
                </#if>
                e.querySelector('.btn-select-item.is-active').classList.remove('is-active')
                item.classList.add('is-active')
                params[paramKey] = item.value
            })
        })
    }

    function showMoreSearchItem(e) {
        const icon = e.querySelector('.iconfont')
        const con = e.parentNode.querySelector('.content')
        if (icon.classList.contains('is-reverse')) {
            con.show()
        } else {
            con.hide()
        }
        icon.classList.toggle('is-reverse')
    }

    const filterWrap = document.querySelector('.filter')
    function showFilter() {
        if(!gugeeGobal.isLogin) {
            toLogin()
            return false
        }

        filterWrap.show()
        document.body.style.overflow = 'hidden'
        document.querySelector('.tiktoker-list').hide()
    }

    function hideFilter() {
        filterWrap.hide()
        document.body.style.overflowY = 'auto'
        document.querySelector('.tiktoker-list').show()
    }

    function showSortType() {
		document.getElementById('sortType').show()
    }

    function clearAll() {
        params = {
            pageSize: 10,
            page: 1,
        }
        document.getElementById('taggedUsername').value = ''
        /*document.querySelectorAll('.gd-checkbox input').forEach(item => {
            item.checked = false
        })*/
        document.querySelectorAll('.filter .is-active').forEach(item => {
            item.classList.remove('is-active')
        })
        // hideCust()
        document.querySelectorAll('.filter .btn-select-item:first-child').forEach(item => {
            item.classList.add('is-active')
        })
        document.querySelectorAll('.filter .gd-option:first-child').forEach(item => {
            item.classList.add('is-active')
            item.parentElement.parentElement.previousElementSibling.querySelector('.label').innerText = item.innerText
        })
        document.querySelectorAll('.btn-select>.btn-select-item:first-child').forEach(item => {
            item.classList.add('is-active')
        })
    }
</script>